<template>
	<el-drawer
		ref="reviewDrawer"
		title="标签打印预览"
		v-model="drawer"
		size="70%">
		<template #default>
			<el-container>
				<el-aside style="padding-left: 20px;width: 260px;">
					<el-form-item label="标签样式">
						<ex-select v-model="labelTemplate" dict-code="LABEL_PRINT_STYLE" placeholder="请选择打印样式"></ex-select>
					</el-form-item>
					<el-form-item label="资产编码">
						<div class="assetCodeList" :style="'height:'+assetCodeListHeight+'px;'">
							<template v-for="(assetCode,index) in assetCodes">
								<div style="float:left;">
									<el-tag>{{ assetCode }}</el-tag>
								</div>
								<div style="float: left">
									<el-icon size="small" @click="removeCode(index)">
										<component is="el-icon-circle-close"></component>
									</el-icon>
								</div>
							</template>
						</div>
					</el-form-item>
				</el-aside>
				<el-main v-loading="loading">
					<template v-if="!pdfUrl">
						<el-empty style="height: 400px;"></el-empty>
					</template>
					<template v-else>
						<iframe ref="pdfFrame" :src="pdfUrl" class="pdfIFrame" :style="'height:'+pdfIframeHeight+'px;'"
								@load="loading = false">
						</iframe>
					</template>
				</el-main>
			</el-container>
		</template>
		<template #footer>
			<div style="flex: auto;text-align: center">
				<el-button plain type="primary" icon="el-icon-refresh" @click="printReview" :loading="loading">
					{{ $t('button.print_review') }}
				</el-button>
				<el-button plain type="info" icon="el-icon-close" @click="drawer=false">{{
						$t('button.cancel_review')
					}}
				</el-button>
			</div>
		</template>

	</el-drawer>
</template>

<script>

import ExLabel from "@/components/exLabel/index.vue";
import SearchForm from "@/components/exSearch/search_form.vue";
import globalparam from "@/constant/model/globalparam";
import ExSelect from "@/components/exSelect/index.vue";

export default {
	name: 'printReview',
	components: {
		ExSelect,
		SearchForm,
		ExLabel,
	},
	data() {
		return {
			drawer: false,
			loading: false,
			labelTemplate: '1',
			assetCodeListHeight: 0,
			pdfIframeHeight: 0,
			assetCodes: [],
			documentId:null,
			pdfUrl: null,
		}
	},
	created() {
	},
	mounted() {
		this.resetHeight();
		window.addEventListener("resize", this.resetHeight);
	},
	beforeUnmount() {
		window.removeEventListener("resize", this.resetHeight);
	},
	methods: {
		resetHeight() {
			this.assetCodeListHeight = window.innerHeight - 205;
			this.pdfIframeHeight = window.innerHeight - 170;
		},
		open(data) {
			this.assetCodes = data.assetCodes;
			this.documentId = data.documentId;
			this.drawer = true;
			this.labelTemplate = '1';
			this.printReview();
		},
		removeCode(index) {
			this.assetCodes.splice(index, 1);
		},
		async printReview() {
			if (this.assetCodes.length === 0) {
				this.pdfUrl = null;
				return;
			}
			try {
				this.loading = true;
				let minioServerUrl = await this.$cache.data.loadGlobalParam(globalparam.minioServerUrlInner.paramCode);
				let paramValue = await this.$cache.data.loadGlobalParam(globalparam.labelPrintTemplate.paramCode);
				let templateUrl = null;
				if (paramValue[this.labelTemplate] && paramValue[this.labelTemplate][0]) {
					let tempFiles = this.$TOOL.toObj(paramValue[this.labelTemplate]);
					if (tempFiles[0]) {
						templateUrl = minioServerUrl + tempFiles[0].realUrl;
					}
				}
				if (!templateUrl) {
					this.$message.error("打印模板加载失败");
					return;
				}
				let data = {
					reportType: "pdf",// html,pdf
					templateUrl: templateUrl,
					assetCodes: this.assetCodes,
					documentId: this.documentId,
				};
				let res = await this.$API.system.jasper.assetTags.post(data);
				let blob = null;
				if (data.reportType === 'html') {
					blob = new Blob([res], {type: 'text/html'}); //文件流处理
				} else {
					blob = new Blob([res], {type: 'application/pdf'}); //文件流处理
				}
				this.pdfUrl = window.URL.createObjectURL(blob);
			} finally {
				this.loading = false;
			}

		},
		exportPdf() {
		},
	}
}
</script>

<style scoped>
.pdfIFrame {
	width: 100%;
	overflow: auto;
	border: 0;
}

.assetCodeList {
	width: 100%;
//height: 100%; //border: 1px solid #a6aab1; margin-right: 10px;
}
</style>
